@page
@{ Layout = "_Layout"; }
@section Styles{
<link href="/sitefiles/assets/lib/geeks/css/bootstrap-icons.css" rel="stylesheet" />
<link href="/sitefiles/assets/css/menu.css" rel="stylesheet" type="text/css" />
<link href="/sitefiles/assets/lib/animate/animate.min.css" rel="stylesheet" type="text/css" />
<link href="/sitefiles/assets/lib/geeks/css/theme.min.css" rel="stylesheet" type="text/css" />
<style>
        #sidebar .el-menu-item, .el-submenu__title {
            height: 50px;
            line-height: 50px;
        }

        #sidebar .el-submenu .el-menu-item {
            height: 50px;
            line-height: 50px;
        }
</style>
}
<div class="position-relative" v-if="local">
    <div class="position-absolute top-0 end-0 z-3 d-flex justify-content-between align-items-center pt-2 me-1">
        <div class="me-2">
            <el-tooltip class="item" effect="dark" :content="'当前版本：v'+version" placement="bottom">
                <span class="text-warning fs-5">v{{ version }}</span>
            </el-tooltip>
        </div>
        <div class="me-2">
            <el-dropdown :show-timeout="0" v-on:command="btnUserMenuClick">
                <button type="button" class="btn btn-outline-success btn-sm rounded">{{ local.auth }}-{{ local.displayName }}<i class="el-icon-arrow-down el-icon--right"></i></button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-user" command="view">预览信息</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-edit" command="profile">修改信息</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-key" command="password">修改密码</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-switch-button" command="logout">安全退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div class="me-1 mt-0">
            <span class="avatar avatar-sm">
                <img :src="local.avatarUrl || DEFAULT_AVATAR_URL" class="rounded">
            </span>
        </div>
        <div class="ms-2 me-1" v-if="isSafeMode">
            <el-tooltip class="item" effect="dark" content="安全模式下可能会禁用一些功能，比如编辑器上传任意文件、系统运行环境等" placement="left">
                <span class="p-3 bg-danger text-white rounded-0">安全模式</span>
            </el-tooltip>
        </div>
    </div>
    <div id="sidebar" :style="{width: leftWidth + 'px'}">
        <div class="title">
            <span>
                <span v-if="!isCollapse">
                    <el-link v-if="!isMobileMenu" :underline="false" v-on:click="isCollapse = true;">
                        <i class="el-icon-s-fold" style="font-size: 16px;"></i><span style="font-size: 16px;margin-left:8px;">控制台</span>
                    </el-link>
                </span>
                <span v-else>
                    <el-link v-if="!isMobileMenu" :underline="false" v-on:click="isCollapse = false;">
                        <i class="el-icon-s-unfold" style="font-size: 16px;"></i>
                    </el-link>
                </span>
            </span>
        </div>
        <el-container style="padding-top: 0; padding-bottom: 0; overflow:hidden;">
            <el-main style="padding: 0; margin: 0;">
                <el-scrollbar class="scrollbar" :style="{height: ($(window).height() - 65) + 'px'}">

                    <el-menu v-if="menus"
                             :default-openeds="defaultOpeneds"
                             :unique-opened="true"
                             :collapse="isCollapse"
                             :collapse-transition="false"
                             v-on:select="btnSideMenuClick">

                        <template v-for="level1 in menus">
                            <template v-if="level1.children && level1.children.length > 0">

                                <el-submenu :index="level1.id">
                                    <template slot="title">
                                        <i v-if="level1.iconClass" :class="level1.iconClass"></i>
                                        <span>{{ level1.text }}</span>
                                    </template>

                                    <template v-for="level2 in level1.children">

                                        <template v-if="level2.children && level2.children.length > 0">

                                            <el-submenu :index="level2.id">
                                                <template slot="title">
                                                    <i v-if="level2.iconClass" :class="level2.iconClass"></i>
                                                    <span>{{ level2.text }}</span>
                                                </template>

                                                <template v-for="level3 in level2.children">
                                                    <el-menu-item :class="{'is-active': level3.id === defaultActive }" :index="getIndex(level1, level2, level3)">
                                                        <i v-if="level3.id == defaultActive" class="el-icon-success"></i>
                                                        <i v-else class="el-icon-star-off"></i>
                                                        <span>{{ level3.text }}</span>
                                                    </el-menu-item>
                                                </template>

                                            </el-submenu>

                                        </template>
                                        <template v-else>
                                            <el-menu-item :class="{'is-active': level2.id === defaultActive }" :index="getIndex(level1, level2)">
                                                <i v-if="level2.id === defaultActive" class="el-icon-success"></i>
                                                <i v-else class="el-icon-star-off"></i>
                                                <span>{{ level2.text }}</span>
                                            </el-menu-item>
                                        </template>
                                    </template>

                                </el-submenu>
                            </template>
                            <template v-else>
                                <el-menu-item :class="{'is-active': level1.id === defaultActive }" :index="getIndex(level1)">
                                    <i v-if="level1.id === defaultActive" class="el-icon-success"></i>
                                    <i v-else :class="level1.iconClass"></i>
                                    <span>{{ level1.text }}</span>
                                </el-menu-item>
                            </template>
                        </template>
                    </el-menu>
                </el-scrollbar>
            </el-main>
        </el-container>
    </div>
    <div v-if="tabs && tabs.length > 0" id="tabs" :style="{width: (winWidth - leftWidth) + 'px', marginLeft: leftWidth + 'px',marginTop:8+'px'}">
        <el-tabs v-model="tabName" type="border-card" :closable="false" v-on:tab-remove="utils.removeTab" v-on:tab-click="tabClick">
            <el-tab-pane :key="item.name"
                         v-for="(item, index) in tabs"
                         :name="item.name" :closable="item.title!=='首页'">
                <span slot="label">
                    <span v-if="item.title==='首页'"><i class="el-icon-s-home fs-4"></i> 欢迎：{{ local.displayName }}</span>
                    <span v-else>{{ item.title }}</span>
                </span>
                <iframe class="animate__animated animate__fadeInRight" :id="'frm-' + item.name" :src="item.url" style="width: 100%; height: 100%; border: none" :style="{height: (winHeight - 40) + 'px'}"></iframe>
            </el-tab-pane>
        </el-tabs>
    </div>

    <ul v-show="contextMenuVisible" :style="{left: contextLeft + 'px', top: contextTop + 'px'}" class="el-dropdown-menu" style="z-index: 2001; position: absolute; display: none;">
        <li v-on:click="btnContextClick('reload')" class="el-dropdown-menu__item">刷新</li>
        <li v-on:click="btnContextClick('all')" class="el-dropdown-menu__item">关闭其他</li>
    </ul>
</div>
<template>
    <el-drawer :title="topFrameTitle" destroy-on-close
               :size="topFrameWidth+'%'"
               :visible.sync="topFrameDrawer"
               direction="ltr">
        <iframe :src="topFrameSrc" style="width: 100%; height: 100%; border: none" :style="{height: (winHeight - 100) + 'px'}"></iframe>
    </el-drawer>
</template>
@section Scripts{
<script src="/sitefiles/assets/js/admin/index.js" type="text/javascript"></script>
}

